/**
 * 使用 classnames 模块来优化 react 中 class 的动态绑定
 *
 *    import classNames from 'classnames'
 *
 *    1. 传递多个字符串
 *    classNames('box1', 'box2')                              => 'box1 box2'
 *    classNames('box1', cur === 'home' ? 'active' : '')      => 'box1 active' | 'box1 '
 *    2. 传递对象
 *    classNames({ key1: value1, key2: value2 })
 *       key - 表示类名
 *       value - 表示该类型是否需要存在的一个条件表达式
 *    classNames({ key1: true, key2: false })                 => 'key1'
 *    3. 传递数组
 *    classNames(['box1', {key1: true}])                      => 'box1 key1'
 */

import { Component, ReactNode, createElement } from "react";
import classNames from "classnames";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

import "./global.css";

// let cur = "";
// console.log("classNames('box1', 'box2') ", classNames("box1", "box2"));
// console.log(
//   "classNames('box1', cur === 'home' ? 'active' : '')",
//   classNames("box1", cur === "home" ? "active" : "")
// );
// console.log(
//   "classNames({ key1: true, key2: false }) ",
//   classNames({ key1: true, key2: 1 + 1 === 2 })
// );

// console.log(
//   "classNames(['box1', {key1: true}]) ",
//   classNames(["box1", { key1: true }])
// );

// 定义一个动态组件 Com
class Com extends Component<{
  is: string;
}> {
  render() {
    const { is } = this.props;
    // TODO... 字符串如何找到对应的组件
    return createElement(Home);

    // return (
    //   <>
    //     {is === "Home" && <Home />}
    //     {is === "About" && <About />}
    //     {is === "Contact" && <Contact />}

    //     {/* 抽取一个 Com 组件，并没有解决这里条件写的很啰嗦的问题
    //       正确的方案应该是不使用 JSX 而是直接使用 createElement
    //     */}
    //   </>
    // );
  }
}

interface IProps {}

interface IState {
  cur: string;
}

export default class App extends Component<IProps, IState> {
  state: Readonly<IState> = {
    cur: "Home",
  };

  change = (name: string) => {
    this.setState({
      cur: name,
    });
  };

  render() {
    const { cur } = this.state;

    return (
      <div>
        <h1>Tabs 选项卡切换</h1>

        <button
          // className={cur === "Home" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Home" })}
          onClick={() => this.change("Home")}
        >
          Home
        </button>
        <button
          // className={cur === "About" ? "button active" : "button"}
          className={classNames("button", { active: cur === "About" })}
          onClick={() => this.change("About")}
        >
          About
        </button>
        <button
          // className={cur === "Contact" ? "button active" : "button"}
          className={classNames("button", { active: cur === "Contact" })}
          onClick={() => this.change("Contact")}
        >
          Contact
        </button>

        <hr />
        {/* {cur === "Home" && <Home />}
        {cur === "About" && <About />}
        {cur === "Contact" && <Contact />} */}

        {/* 上面代码在Vue中可以通过动态组件+is来控制，React中没有动态组件，需要自己实现 */}

        <Com is={cur} />
      </div>
    );
  }
}
